(function() {
	var TabBar = {
		ACTIVE_COLOR: "#007aff",
		NORMAL_COLOR: "#000",
		curIndex: -1,
		tags: [],
		bg:null,
		subPages: [{
			id: "page0",
			url: "html/main0.html",
			name: "首页",
			icon: "\ue500",
		}, {
			id: "page1",
			url: "html/main1.html",
			name: "新闻",
			icon: "\ue400",
		}, {
			id: "page2",
			url: "html/main2.html",
			name: "圈子",
			icon: "\ue262",
		}, {
			id: "page3",
			url: "html/main3.html",
			name: "动动",
			icon: "\ue364",
		}, {
			id: "page4",
			url: "html/main4.html",
			name: "我的",
			icon: "\ue100",
		}],
		subStyle: {
			top: 0,
			bottom: 51
		},
		init: function() {
			TabBar.initIcon();
			TabBar.initPage();
			TabBar.changePage(0);

			window.addEventListener("changePage", function(e) {
				TabBar.changePage(e.detail.key);
			});
			
			window.addEventListener("hideTabBar",function(e){
				TabBar.bg.hide();
			});
			
			window.addEventListener("showTabBar",function(e){
				TabBar.bg.show();
			});
			
		},
		initIcon: function() {
			var k = 100 / TabBar.subPages.length;

			for(var i = 0; i < TabBar.subPages.length; i++) {
				var p = TabBar.subPages[i];
				var pos = (i * k) + "%";
				var iconTag = {
					id: p.id + "-icon",
					tag: "font",
					text: p.icon,
					position: {
						top: "4px",
						left: pos,
						width: k + "%",
						height: "24px"
					},
					textStyles: {
						fontSrc: "_www/fonts/mui.ttf",
						align: "center",
						size: "24px"
					}
				};

				var txtTag = {
					id: p.id + "-text",
					tag: "font",
					text: p.name,
					position: {
						top: "23px",
						left: pos,
						width: k + "%",
						height: "24px"
					},
					textStyles: {
						align: "center",
						size: "10px"
					}
				};

				TabBar.tags.push(iconTag);
				TabBar.tags.push(txtTag);
			}

			TabBar.bg= new plus.nativeObj.View('tabBar', {
				bottom: "0px",
				left: 0,
				height: "50px",
				width: "100%",
				backgroundColor: "#fff0"
			}, TabBar.tags);

			TabBar.bg.addEventListener('click', function(e) {
				var clientX = e.clientX;
				var currIndex = -1;
				if(clientX < 0) return;
				var pageW = window.innerWidth;
				for(var i = 0; i < TabBar.subPages.length; i++) {
					if(clientX > parseInt(pageW * i * k / 100) && clientX <= parseInt(pageW * (i + 1) * k / 100)) {
						currIndex = i;
						break;
					}
				}
				if(currIndex < 0) return;
				TabBar.changePage(currIndex);

			});
			plus.webview.currentWebview().append(TabBar.bg);
		},
		initPage: function() {
			var self = plus.webview.currentWebview();
			//兼容安卓上添加titleNView 和 设置沉浸式模式会遮盖子webview内容
			if(mui.os.android) {
				if(plus.navigator.isImmersedStatusbar()) {
					TabBar.subStyle.top += plus.navigator.getStatusbarHeight();
				}
				if(self.getTitleNView()) {
					TabBar.subStyle.top += 40;
				}
			}

			for(var i = 0; i < TabBar.subPages.length; i++) {
				if(!plus.webview.getWebviewById(TabBar.subPages[i].id)) {
					var sub = plus.webview.create(TabBar.subPages[i].url, TabBar.subPages[i].id, TabBar.subStyle);
					sub.hide();
					self.append(sub);
				}
			}

		},
		changePage: function(index) {
			if(TabBar.curIndex == index) return;
			var nview = plus.nativeObj.View.getViewById('tabBar');

			for(var i = 0; i < TabBar.subPages.length; i++) {
				var iconTag = TabBar.tags[i * 2];
				var textTag = TabBar.tags[i * 2 + 1];
				iconTag.textStyles.color = i == index ? TabBar.ACTIVE_COLOR : TabBar.NORMAL_COLOR;
				textTag.textStyles.color = i == index ? TabBar.ACTIVE_COLOR : TabBar.NORMAL_COLOR;
				nview.drawText(iconTag.text, iconTag.position, iconTag.textStyles, iconTag.id);
				nview.drawText(textTag.text, textTag.position, textTag.textStyles, textTag.id);
			}
			var page = plus.webview.getWebviewById(TabBar.subPages[index].id);
			mui.fire(page, 'show');
			page.show("fade-in", 300);
			if(TabBar.curIndex >= 0) {
				page = plus.webview.getWebviewById(TabBar.subPages[TabBar.curIndex].id);
				mui.fire(page, 'hide');
				page.hide();
			}
			TabBar.curIndex = index;
		}
	}

	mui.init({
		statusBarBackground: '#000000'
	});

	var showGuide = plus.storage.getItem("lauchFlaga");
	if(showGuide) {
		//有值，说明已经显示过了，无需显示；
		//关闭splash页面；
		plus.navigator.closeSplashscreen();
	} else {
		//显示启动导航
		mui.openWindow({
			id: 'guide',
			url: 'html/guide.html',
			styles: {
				popGesture: "none"
			},
			show: {
				aniShow: 'none'
			},
			waiting: {
				autoShow: false
			}
		});
	}
	TabBar.init();

	plus.navigator.setStatusBarBackground("#222222");

})();